<template>
  <div class="new-mv">
    <!-- 标签栏 -->
    <div class="tag-wrap">
      <ul class="area clearfix">
        <span>地区：</span>
        <li v-for="(item,index) in area" :key="item"><span
            :class="{active:index===currentAreaIndex}"
            @click="changeArea(index)">{{item}}</span></li>
      </ul>
      <ul class="type clearfix">
        <span>类型：</span>
        <li v-for="(item,index) in type" :key="item"><span
            :class="{active:index===currentTypeIndex}"
            @click="changeType(index)">{{item}}</span></li>
      </ul>
      <ul class="area clearfix">
        <span>排序：</span>
        <li v-for="(item,index) in order" :key="item"><span
            :class="{active:index===currentOrderIndex}"
            @click="changeOrder(index)">{{item}}</span></li>
      </ul>
    </div>
    <!-- MV -->
    <mv-list :mv-list="newMv"></mv-list>
    <!-- 分页器 -->
    <el-pagination v-if="newMv.length>0" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[8, 16,24,32]" :page-size="8"
      layout="total, sizes, prev, pager, next, jumper" :total="total"
      background>
    </el-pagination>
  </div>
</template>

<script>
import mvList from './MvList'
export default {
  data() {
    return {
      // 地区标签
      area: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
      // 类型标签
      type: ['全部', '官方版', '原声', '现场版', '网易出品'],
      // 排序
      order: ['上升最快', '最热', '最新'],
      // 当前地区标签索引
      currentAreaIndex: 0,
      // 当前类型标签索引
      currentTypeIndex: 0,
      // 当前排序标签索引
      currentOrderIndex: 0,
      // 最新MV请求参数
      newMvRequest: {
        area: '全部',
        type: '全部',
        order: '上升最快',
        limit: 8,
        offset: 0
      },
      // 最新MV数据数组
      newMv: [],
      // 数据总条数
      total: 0,
      // 当前页码
      currentPage: 1
    }
  },
  components: {
    mvList
  },
  methods: {
    // 获取最新MV数据
    async getNewMv() {
      const res = await this.$request('https://autumnfish.cn/mv/all', {
        params: this.newMvRequest
      })
      this.newMv = res.data.data
      // 接口问题，有count就赋值
      if (res.data.count) {
        this.total = res.data.count
      }
    },
    // 改变地区
    changeArea(index) {
      this.currentAreaIndex = index
      this.newMvRequest.area = this.area[index]
      this.getNewMv()
    },
    // 改变类型
    changeType(index) {
      this.currentTypeIndex = index
      this.newMvRequest.type = this.type[index]
      this.getNewMv()
    },
    // 改变排序
    changeOrder(index) {
      this.currentOrderIndex = index
      this.newMvRequest.order = this.order[index]
      this.getNewMv()
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.currentPage = 1
      this.newMvRequest.limit = val
      this.newMvRequest.offset = 0
      this.getNewMv()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.newMvRequest.offset = (val - 1) * this.newMvRequest.limit
      this.getNewMv()
    }
  },
  created() {
    this.getNewMv()
  }
}
</script>

<style lang="scss" scoped>
.new-mv {
  max-width: 1100px;
  margin: 20px auto 0;
  .tag-wrap {
    ul {
      margin-bottom: 30px;
      span {
        float: left;
        font-size: 14px;
        padding: 5px 0;
      }
      li {
        float: left;
        border-right: 1px solid #f2f2f1;
        span {
          margin: 0 20px;
          padding: 5px 20px;
          font-size: 14px;
          color: #808080;
          cursor: pointer;
          transition: color, background-color 0.3s;
          &:hover {
            border-radius: 13px;
            background-color: #fcf6f5;
          }
          &.active {
            border-radius: 13px;
            color: #de6d60;
            background-color: #fcf6f5;
          }
        }
      }
    }
  }
  .el-pagination {
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
  ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--theme-color); // 进行修改背景和字体
    color: #ffffff;
  }
  ::v-deep.el-pagination.is-background li:not(.disabled):hover {
    color: var(--theme-color);
  }
  ::v-deep.el-select .el-input.is-focus .el-input__inner {
    border-color: var(--theme-color);
  }
  ::v-deep.el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: var(--theme-color);
  }
  ::v-deep.el-select .el-input__inner:focus {
    border-color: var(--theme-color);
  }
}
</style>